<template>
	<view class="flex-col page">
		<u-navbar title="通过文字" back-icon-color="#fff" title-color="#fff" :background="background"></u-navbar>
		<view class="flex-col self-stretch group_2">
			<view class="flex-col">
				<view class="flex-col section">
					<view class="flex-row items-center">
						<view class="section_2"></view>
						<view class="area-title ml-5-5">
							AI文案
						</view>
					</view>
					
					<view class="flex-row items-start self-stretch ml-15 mt-10" >
						
						<textarea v-model="inputValue" :maxlength="5000" placeholder="请输入文案" class="text_2"
							placeholder-class="text_2 "></textarea>
							<!-- <view @click="clearInput" class="flex-row justify-center items-center section_3 mr-20"><text class="font">清除</text></view> -->
							<view @click="clearInput" class="clear-img-btn">
								<image class="clear-img" src="../../static/image/other/audio-list-del.png" mode=""></image>
							</view>
					</view>
					<view class="flex-row justify-evenly items-center self-end">
						<view class="flex-row justify-center items-center self-end section_3 mr-20" @click="aiCreate">
							<image class="image_3" src="https://terminator.axu9.com/images/ai-create-icon-white.png" />
							<text class="font">AI生成</text>
						</view>
						<view class="flex-row justify-center items-center self-end section_3" @click="aiRecord">
							<image class="image_14" src="https://terminator.axu9.com/images/ai-record-icon-white.png" />
							<text class="font">录制</text>
						</view>
					</view>
					
				</view>
				<view class="flex-col section_4 mt-15">
					<view class="flex-row justify-between items-center yinse">
						<text class="font_2 text_4">音色选择</text>
						<view class="flex-row">
							<view class="flex-col justify-start items-center tabs-list"
								:class="current == index ? 'text-wrapper' : 'text-wrapper_2'"
								v-for="(item,index) in timbreTypeList" :key="index" @click="changeTabs(index)"><text
									class="font">{{item}}</text></view>
						</view>
					</view>
					<!-- 系统音色的二级分类 -->
					<view class="flex-row pd-t-20" v-if="current == 1">
						<view class="flex-col justify-start items-center xitong-tabs-list"
							:class="currentSec == index ? 'text-wrapper_4' : 'text-wrapper_5'"
							v-for="(item,index) in secondTimberList" :key="index" @click="changeXitongTabs(index,item.audio_type)"><text
								class="">{{item.audio_type}}</text></view>
					</view>
					
					<!-- 全部音色列表 -->
					<view class="content" v-if="current == 0">
						<view class="flex-row justify-between mt-15-5 items-center timbre-list-item relative"
							v-for="(item,index) in timbreList" :key="index" @click="audioClick(index,item)"
							:class="item.isClick == true? 'border-green' : ''">
							<view class="flex-row items-center list-lf">
								<image class="image_4" src="https://terminator.axu9.com/images/by-text-list-icon.png" />
								<text class="" :class="item.isClick == true? 'font_33' : 'font_3'">{{item.title}}</text>
							</view>

							<image v-if="audioIndex == index" class="image_5"
								src="https://terminator.axu9.com/images/playing.gif" />
								
								<view v-if="current == 0 && item.type == 2" class="zhiding flex-row items-center justify-end">
									我的
								</view>
						</view>
					</view>
					
					<!-- 系统音色列表 -->
					<view class="content" v-if="current == 1">
						<view class="flex-row justify-between mt-15-5 items-center timbre-list-item relative"
							v-for="(item,index) in timbreList" :key="index" @click="audioClick(index,item)"
							:class="item.isClick == true? 'border-green' : ''">
							<view class="flex-row items-center list-lf">
								<image class="image_4" src="https://terminator.axu9.com/images/by-text-list-icon.png" />
								<text class="" :class="item.isClick == true? 'font_33' : 'font_3'">{{item.title}}</text>
							</view>
					
							<image v-if="audioIndex == index" class="image_5"
								src="https://terminator.axu9.com/images/playing.gif" />
								
								<view v-if="current == 0 && item.type == 2" class="zhiding flex-row items-center justify-end">
									我的
								</view>
						</view>
					</view>
					
					<!-- 我的音色列表 -->
					<view class="content" v-if="current == 2">
						<!-- 添加音色 开始 -->
						<!-- <view>
							<view @click="makeTimbre" class="add-mine-voice flex-row items-center justify-center">
								
								<image class="add-icon" src="https://terminator.axu9.com/images/add-bg-white-icon.png"
									mode=""></image>
								
								<text class="add-text">创建你的声音</text>
							</view>
						</view> -->
						<!-- 添加音色 结束 -->
						<view class="" v-if="timbreList.length > 0">
							<view @click="audioClick(index,item)"
							:class="item.isClick == true? 'border-green' : ''" class="flex-row justify-between mt-15-5 items-center timbre-list-item"
								v-for="(item,index) in timbreList" :key="index" >
								<!-- <view class="section_5"></view> -->
								<view class="flex-row items-center list-lf">
									<image class="image_4"
										src="https://terminator.axu9.com/images/by-text-list-icon.png" />
									<text class=""
										:class="audioIndex == index? 'font_33' : 'font_3'">{{item.title}}</text>
								</view>

								<image v-if="audioIndex == index" class="image_5"
									src="https://terminator.axu9.com/images/playing.gif" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom flex-row justify-center">
				<view @click="create" class="flex-col justify-start items-center text-wrapper_3 mt-32-5"><text class="font_2">生成</text>
				</view>
			</view>
			
		</view>
		
		<!-- AI生成文案gif加载弹窗 -->
		<u-popup v-model="aiGifShow" mode="center" :mask-close-able="false">
			<view>
				<image class="ai-gif-class" src="https://terminator.axu9.com/images/ai-shengcheng-gif.gif" mode=""></image>
			</view>
		</u-popup>
		<!-- 设置标题弹窗 -->
		<audioTitlePop ref="audiotitle" @submit="submit" :isLoading="isLoading"></audioTitlePop>
	</view>
</template>

<script>
	import { getTimbre, timbreSynthesis, aliHecheng, timbreSynthesisRe, cateTimbre, cateSelect } from "@/api/audio.js"
	import { createAI } from "@/api/video.js"
	import audioTitlePop from "../../components/audioTitlePop"
	
	export default {
		components: {
			audioTitlePop
		},
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				inputValue: '',
				timbreTypeList: ['全部','系统', '我的'],
				current: 0,
				timbreList: [
					// {
					// 	title: '经典客服',
					// 	result_url: 'https://audiovideo.axa2.com/20240808/66b461995a1af.m4a',
					// 	isClick: false
					// },
					// {
					// 	title: '知性女声',
					// 	result_url: 'https://audiovideo.axa2.com/20240808/66b461995a1af.m4a',
					// 	isClick: false
					// },
					// {
					// 	title: '知性女声1',
					// 	result_url: 'https://terminator.axu9.com/dongge.mp3',
					// 	isClick: false
					// },
				
				],
				secondTimberList: [],//系统音色的二级分类
				currentSec: 0,//系统音色的二级分类选中下标
				audioIndex: -1,//播放的index
				voiceUrl: '',
				innerAudioContext: null,
				playIndex: -1,//点击的index
				aiGifShow: false,
				toAddType: 1,//1个人中心
				videoPath: '',//视频路径
				clickoption: 1,//1音频选项--通过文字 2视频提取文字
				// videoContent: '',//视频提取文案
				toOptionType: 1,//
				timbreUrl: '',//音色路径
				audioTitle: '',//音频标题
				audioUrl: '',//音频路径
				timbreId: '',//音色id
				timbreType: 1,//音色类型 1系统 2我的
				audioId: '',//合成的音频id
				audio_type: '',//系统音色分类名称
				isLoading: false,//是否加载中
			}
		},
		
		created() {
			// this.contextInit();
		},
		onShow(){
			// await this.contextInit();
			
		},
		// beforeDestroy() {
		// 	console.log('离开')
		// 	// this.innerAudioContext.destroy();
		// },
		onLoad(options) {
			console.log(options,'options')
			this.toAddType = options.toAddType ? options.toAddType : 1;
			this.videoPath = options.videoPath ? options.videoPath : '';
			this.clickoption  = options.clickoption ? options.clickoption : 1;
			this.toOptionType = options.toOptionType ? options.toOptionType : 1;
			// this.inputValue = uni.getStorageSync("wenan") ? uni.getStorageSync("wenan") : '';
			this.inputValue = options.videoContent ? options.videoContent : uni.getStorageSync("wenan") ? uni.getStorageSync("wenan") : '';
			this.audioId = options.audioId ? options.audioId : '';
			
			this.getTimbreList();
			this.getCate();//获取系统音色分类列表
		},
		onUnload() {
			console.log('kkkkk')
			if(this.innerAudioContext) {
				this.innerAudioContext.stop();
				this.innerAudioContext.destroy();
			}
			uni.setStorageSync("wenan",this.inputValue)
			
		},
		
		// onShareAppMessage: function (res) {},//分享好友
		// onShareTimeline(){},//分享朋友圈
		methods: {
			secondUpload(){
				timbreSynthesisRe({
					mp3_id: this.audioId,
					timbre_id: this.timbreId.toString()
				}).then(res => {
					console.log(res,'ksksks')
					if(res.errno == 1){
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '出错了',
						icon: 'none'
					})
				})
			},
			// secondUpload(){
			// 	uni.request({
			// 		url: 'https://haoduogeni.axa2.com/api/v1.audio/timbre_synthesis_re', //接口地址：前缀+方法中传入的地址    
			// 		method: "POST", //请求方法：传入的方法或者默认是“GET”    
			// 		data: {
			// 			mp3_id: this.audioId,
			// 			timbre_id: this.timbreId.toString()
			// 		}, //传递参数：传入的参数或者默认传递空集合    
			// 		header: {
			// 			// "api-token": uni.getStorageSync("token"), //自定义请求头信息      
			// 		},
			// 		success: (res) => { //返回的数据（不固定，看后端接口，这里是做了一个判断，如果不为true，用uni.showToast方法提示获取数据失败)     // 如果不满足上述判断就输出数据     
			// 			console.log(res,'secondUpload')
				
						
			// 		}, // 这里的接口请求，如果出现问题就输出接口请求失败    
			// 		fail: (err) => {
			// 			console.log(err)    
						
			// 		},
			// 	})
			// },
			async contextInit() {
				let that = this;
				var innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = false;
				
				innerAudioContext.loop = false;
				innerAudioContext.onPlay(() => {
					that.audioIndex = that.playIndex;
					uni.hideLoading();
					// that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
					// that.audioPlay(); 
					console.log('开始播放',that.audioIndex); 
				});
				innerAudioContext.onPause(() => {
					that.audioIndex = -1;
					that.audioUrl = '';
					// that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
					// that.audioPlay(); 
					console.log('暂停播放'); 
				});
				innerAudioContext.onTimeUpdate(function() {
					// that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
				});
				innerAudioContext.onStop(function() {
					that.audioIndex = -1;
					console.log('结束播放');
					// that.innerAudioContext.destroy();
					uni.hideLoading();
				});
				innerAudioContext.onEnded(function() {
					that.audioIndex = -1;
					that.audioUrl = '';
					// uni.hideLoading();
					// that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
					// that.audioPlay(); 
					console.log('暂停播放'); 
					// that.audioPause(); 
				});
				
				innerAudioContext.onError((res) => {
					console.log(res,'错误')
					that.audioIndex = -1;
					that.audioUrl = '';
					uni.showToast({
						title: '音频无法播放',
						icon: 'none'
					})
					
					
				});
				that.innerAudioContext = innerAudioContext
			},
			// 获取音色列表
			getTimbreList(){
				getTimbre({
					uid: uni.getStorageSync("userId"),
					type: this.current,//0 全部 1 我的 2系统
				}).then(res => {
					// console.log(res.data,'获取音色列表')
					var arr = res.data.map(item => {
						return {
							...item,
							isClick: false
						}
					})
					this.timbreList = arr;
				}).catch(err => {
					
				})
			},
			// 清除
			clearInput(){
				this.inputValue = '';
				uni.removeStorageSync("wenan")
			},
			// ai生成
			aiCreate(){
				if(this.inputValue == ''){
					uni.showToast({
						title: '输入内容不能为空',
						icon: 'none'
					})
					return
				}
				console.log('走了么')
				this.aiGifShow = true;
				// return
				let arr = [];
				arr.push({
					role: 'user',
					content: this.inputValue
				})
				console.log(arr,JSON.stringify(arr),'arrrrr')
				// return
				// uni.showLoading({
				// 	title: '思考中'
				// })
				createAI({
					uid: uni.getStorageSync("userId"),
					text: JSON.stringify(arr)
				}).then(res => {
					// uni.hideLoading();
					this.aiGifShow = false;
					console.log(res.data,'ai生成')
					this.inputValue = res.data
				}).catch(err => {
					this.aiGifShow = false;
					ubni.showToast({
						title: '生成失败',
						icon: 'none'
					})
				})
			},
			// AI录制
			aiRecord(){
				if(this.inputValue == ''){
					uni.showToast({
						title: '文案为空，请先生成文案',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '/pagesCreate/addAudio/index?wenan=' + this.inputValue + '&toAddType=2' + '&videoPath=' + this.videoPath + '&clickoption=' + this.clickoption + '&toOptionType=' + this.toOptionType
					
				})
			},
			// 音色一级分类
			changeTabs(index) {
				this.current = index;
				if(this.current == 0 || this.current == 2){
					this.getTimbreList();
				}else if(this.current == 1){
					// 获取系统音色
					this.selectCate();
				}
				
				this.audioIndex = -1;
				this.innerAudioContext.stop();
				this.playIndex = -1;
			},
			// 获取系统音色分类列表
			getCate(){
				cateTimbre().then(res=>{
					if(res.errno == 0){
						this.secondTimberList = res.data;
						this.audio_type = this.secondTimberList[0].audio_type;
					}
				})
			},
			// 根基系统银色分类查询分类列表
			selectCate(){
				cateSelect({
					audio_type: this.audio_type
				}).then(res => {
					var arr = res.data.map(item => {
						return {
							...item,
							isClick: false
						}
					})
					this.timbreList = arr;
				})
			},
			// 系统音色分类
			changeXitongTabs(index,type){
				this.timbreList = []
				this.currentSec = index;
				this.audio_type = type;
				this.selectCate();
				this.audioIndex = -1;
				this.innerAudioContext.stop();
				this.playIndex = -1;
			},
			async audioClick(index,item){
				console.log(item.mp3,'llllllll')
				this.timbreUrl = item.mp3;
				this.timbreId = item.id;
				this.timbreType = item.type;
				// console.log(index,item.isClick,this.innerAudioContext.paused,'点击音频qqqqqq')
				var arr = this.timbreList.map((items,indexs) => {
					return {
						...items,
						isClick: index == indexs ? true : false
					}
				})
				this.timbreList = arr;
				if(this.timbreUrl == null){
					return
				}
				console.log('hahahahah',this.innerAudioContext)
				
				// if(!item.isClick) {
				// 	this.innerAudioContext.stop();
				// 	this.playIndex = index;//播放的音频的下标
				// 	this.innerAudioContext.src = item.mp3;
				// 	// 
				// 	this.innerAudioContext.play()
				// }else {
				// 	if(this.innerAudioContext.paused){
				// 		this.playIndex = index;//播放的音频的下标
				// 		this.innerAudioContext.src = item.mp3;
				// 		this.innerAudioContext.play()
				// 	}else {
				// 		this.innerAudioContext.pause()
				// 	}
				// }
				
				if (item.isClick) {
					console.log('走了么')
					if (this.innerAudioContext.paused) {
						console.log('1111')
						this.innerAudioContext.src = item.mp3;
				
						uni.showLoading({
							title: '加载音频中'
						})
				
						this.innerAudioContext.play()
					} else {
						console.log('2222')
						this.innerAudioContext.stop()
					}
				} else {
					if(this.innerAudioContext){
						
						this.innerAudioContext.stop();
						this.innerAudioContext.destroy();
						this.innerAudioContext = null
					}
					await this.contextInit();
					console.log('33333')
					this.innerAudioContext.src = '';
					this.innerAudioContext.src = item.mp3;
					this.playIndex = index;
					uni.showLoading({
						title: '加载音频中'
					})
									
					this.innerAudioContext.play()
					// if(item.mp3 == "https://audiovideo.axa2.com/1728720703-178_ok.mp3"){
					// 	this.innerAudioContext.src = "https://audiovideo.axa2.com/1725256857|178_ok.mp3"
					// 	uni.showLoading({
					// 		title: '加载音频中'
					// 	})
										
					// 	this.innerAudioContext.play()
					// }else {
					// 	this.innerAudioContext.src = item.mp3;
					// 	uni.showLoading({
					// 		title: '加载音频中'
					// 	})
										
					// 	this.innerAudioContext.play()
					// }
					
					
				
					
				}
				
				
				
				
				
				// if(!this.innerAudioContext.paused){
				// 	this.playIndex = index;//播放的音频的下标
				// 	this.innerAudioContext.src = item.result_url;
				// 	this.innerAudioContext.play()
				// }
				
				// // if(this.audioIndex == index){
				// 	if(!this.innerAudioContext.paused){
				// 		this.innerAudioContext.stop()
				// 		// this.audioIndex = -1;
				// 		if(this.audioIndex == index){
				// 			this.innerAudioContext.pause()
				// 		}
						
				// 	}else {
				// 		this.playIndex = index;
				// 		this.innerAudioContext.src = item.url;
				// 		// if(this.audioIndex == index){
				// 			// this.innerAudioContext.pause()
				// 		// }
				// 		this.innerAudioContext.play()
				// 	}
				// // }
				
			},
			playAudio(index,url) {
				console.log(url,index,'kkkkkkkkk',this.innerAudioContext.paused,this.audioIndex,this.playIndex)
				// this.innerAudioContext.stop()
				this.innerAudioContext.startTime = 0;
				console.log(url,'urrrrr',this.innerAudioContext.paused)
				if(!this.innerAudioContext.paused){
					this.audioIndex = -1;
					this.innerAudioContext.pause()
				}else {
					this.playIndex = index;
					this.innerAudioContext.src = url;
					this.innerAudioContext.play()
				}
				// this.audioIndex = index;
				
			},
			// 生成音色
			makeTimbre(){
				// uni.navigateTo({
				// 	url: '/pagesCreate/addAudio/index?toAddType=3' + '&videoPath=' + this.videoPath + '&clickoption=' + this.clickoption + '&toOptionType=' + this.toOptionType
				// })
				uni.reLaunch({
					url: '/pages/mine/index?current=1'
				})
			},
			// 生成
			create(){
				// uni.reLaunch({
				// 	url: '/pages/create/index'
				// })
				if(this.inputValue == ''){
					uni.showToast({
						title: '文案不能为空',
						icon: 'none'
					})
					return
				}
				if(this.timbreUrl == ''){
					uni.showToast({
						title: '音色未选择',
						icon: 'none'
					})
					return
				}
				if(this.innerAudioContext){
					this.innerAudioContext.stop();
					this.audioIndex = -1;
				}
				this.$refs.audiotitle.open();
			},
			// 跳转-旧
			rederect(){
				this.innerAudioContext.stop();
				this.innerAudioContext.src = '';
				this.innerAudioContext.destroy();
				if(this.toOptionType == 1){
						uni.reLaunch({
							url: '/pages/create/index?audioTitle=' + this.audioTitle + '&audioUrl=' + this.audioUrl + '&videoPath=' + this.videoPath + '&audioId=' + this.audioId
						})
				}else if(this.toOptionType == 2){
						uni.redirectTo({
							url: '/pagesHome/audioList/index?videoPath=' + this.videoPath
						})
				}else if(this.toOptionType == 3){
						uni.redirectTo({
							url: '/pagesMine/worksLibrary/index?current=1'
						})
				}
				
			},
			toMineTimbreSynthesis(){
				if(this.isLoading){
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					})
					return
				}
				this.isLoading = true;
				timbreSynthesis({
					uid: uni.getStorageSync("userId"),
					title: this.audioTitle,
					text: this.inputValue,
					mp3: this.timbreUrl,
					timbre_id: this.timbreId,
				}).then(res => {
					this.isLoading = false;
					uni.hideLoading();
					if(res.errno == 0){
						// uni.hideLoading();
						this.audioId = res.data;
						this.secondUpload();
						this.rederect()
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					this.isLoading = false;
					uni.hideLoading();
					console.log(err,'rrrr')
					uni.showToast({
						title: '出错了',
						icon: 'none'
					})
				})
				console.log(this.videoPath,'this.videoPath')
			},
			toAliTimbreSynthesis(){
				if(this.isLoading){
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					})
					return
				}
				this.isLoading = true
				aliHecheng({
					uid: uni.getStorageSync("userId"),
					title: this.audioTitle,
					text: this.inputValue,
					mp3: this.audioUrl,
					timbre_id: this.timbreId,
				}).then(res => {
					this.isLoading = false;
					uni.hideLoading();
					if(res.errno == 0){
						// this.audioUrl = res.data;
						this.audioId = res.data;
						this.rederect();
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					this.isLoading = false;
					console.log(err,'rrrr')
					uni.showToast({
						title: '出错了',
						icon: 'none'
					})
				})
				console.log(this.videoPath,'this.videoPath')
			},
			submit(data){
				this.audioTitle = data;
				uni.showLoading({
					title: '合成中'
				})
				// this.isLoading = true;
				if(this.timbreType == 2){
					// 通过音色合成语音（直接跳转不用等待）
					this.toMineTimbreSynthesis()
				}else {
					// 阿里语音合成
					this.toAliTimbreSynthesis()
				}
				
				
			},
			
		}
	}
</script>
<style lang="less" scoped>
	/deep/ .u-drawer-bottom {
		background-color: rgba(0, 0, 0, 0) !important;
	}
	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
<style>
	@import url(../../static/css/common.css);
	page {
		height: 100vh;
	}

	.mt-23 {
		margin-top: 46rpx;
	}

	.ml-5-5 {
		margin-left: 11rpx;
	}
	.ml-15 {
		margin-left: 15rpx;
	}
	.mt-10 {
		margin-top: 10rpx;
	}

	.mt-91-5 {
		margin-top: 183rpx;
	}

	.mt-15 {
		margin-top: 30rpx;
	}

	.mt-15-5 {
		margin-top: 31rpx;
	}

	.ml-9 {
		margin-left: 18rpx;
	}
	.mr-20 {
		margin-right: 20rpx;
	}

	.mt-32-5 {
		margin-top: 65rpx;
	}
	.pd-t-20 {
		padding-bottom: 20rpx;
	}

	.page {
		padding: 35rpx 0 81rpx;
		background-color: #111113;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.image {
		width: 655rpx;
		height: 24rpx;
	}

	.group {
		padding: 0 20rpx;
	}

	.image_2 {
		width: 20rpx;
		height: 35rpx;
	}

	.pos {
		position: absolute;
		left: 20rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
	}

	.group_2 {
		padding: 0 30rpx;
	}

	.section {
		width: 690rpx;
		padding: 41rpx 28rpx 26rpx;
		background-color: #212123;
		border-radius: 16rpx;
	}
	.area-title {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		/* margin-bottom: 20rpx; */
	}

	.section_2 {
		background-image: linear-gradient(0deg, #00e486 0%, #00ccbb 100%);
		border-radius: 2rpx;
		width: 4rpx;
		height: 34rpx;
	}

	.text_2 {
		color: #ffffff;
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		height: 12vh;
		width: 90%;
	}
	.clear-img-btn{
		
	}
	.clear-img{
		width: 70rpx;
		height: 70rpx;
	}

	.section_3 {
		/* padding: 20rpx 19rpx;
		background-color: #303030;
		border-radius: 8rpx; */
		width: 140rpx;
		height: 46rpx;
		border-radius: 8rpx;
		background: linear-gradient(88deg,#0153AB, #33c5d8, #00c959);
	}

	.image_3 {
		width: 22rpx;
		height: 26rpx;
		margin-right: 8rpx;
	}
	.image_14 {
		width: 18rpx;
		height: 26rpx;
		margin-right: 8rpx;
	}

	.font {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.text_3 {
		text-shadow: 0 1rpx #131313, 0 -1rpx #131313, 1rpx 0 #131313, -1rpx 0 #131313;
	}

	.section_4 {
		padding: 30rpx 28rpx 0;
		border-radius: 16rpx;
		background-image: url('https://terminator.axu9.com/images/by-text-list-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		/* padding-bottom: 40rpx;
		min-height: 837rpx; */
	}
	.content {
		height: 45vh;
		overflow-y: scroll;
		padding-bottom: 20rpx;
	}

	.font_2 {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		color: #ffffff;
	}

	.text_4 {
		font-weight: 500;
	}
	.yinse {
		padding: 20rpx 0;
	}

	.tabs-list {
		padding: 18rpx 0;
		/* background-color: #00e586; */
		border-radius: 30rpx;
		width: 108rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}

	.tabs-list:last-child {
		margin-right: 0;
	}
	.xitong-tabs-list {
		padding: 14rpx 32rpx;
		border-radius: 6rpx;
		margin-right: 21rpx;
	}
	.xitong-tabs-list:last-child {
		margin-right: 0;
	}

	.text-wrapper {
		/* padding: 18rpx 0; */
		background-color: #00e586;
		/* border-radius: 30rpx;
	  width: 108rpx;
	  height: 60rpx; */

	}

	.text-wrapper_2 {
		/* padding: 18rpx 0; */
		background-color: #212123;
		/* border-radius: 30rpx;
	  width: 108rpx;
	  height: 60rpx; */

	}
	.text-wrapper_4 {
		background-color: #00e586;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
	
	}
	.text-wrapper_5 {
		background: #223833;
		font-weight: 500;
		font-size: 24rpx;
		color: #08F9A7;
		border: 1rpx solid #08F9A7;
	}
	

	.section_5 {
		opacity: 0.41;
		background-color: #394440;
		border-radius: 20rpx;
		height: 120rpx;
		border-left: solid 1rpx #08f9a7;
		border-right: solid 1rpx #08f9a7;
		border-top: solid 1rpx #08f9a7;
		border-bottom: solid 1rpx #08f9a7;
	}

	.image_4 {
		width: 53rpx;
		height: 61rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
	}

	.pos_2 {
		position: absolute;
		left: 36rpx;
		bottom: 23rpx;
	}

	.list-lf {
		width: 70%;
	}

	.font_3 {
		font-size: 30rpx;
		font-family: PingFang SC;
		/* line-height: 29rpx; */
		color: #ffffff;
		width: 90%;
	}

	.font_33 {
		font-size: 30rpx;
		font-family: PingFang SC;
		/* line-height: 29rpx; */
		color: #08f9a7;
		width: 90%;
	}

	.text_5 {
		color: #08f9a7;
		font-weight: 500;
	}

	.pos_4 {
		position: absolute;
		left: 107rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.image_5 {
		/* width: 60rpx;
		height: 48rpx; */
		width: 100rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.zhiding {
		position: absolute;
		right: 0;
		top: 0;
		width: 99rpx;
		height: 53rpx;
		background-image: url('https://terminator.axu9.com/images/zhiding-rg-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #ffffff;
		font-size: 28rpx;
		font-family: YouSheBiaoTiHei;
		line-height: 21rpx;
		text-shadow: 0rpx 0rpx 26rpx #13906161;
		padding-right: 10rpx;
	}

	.pos_3 {
		position: absolute;
		right: 49rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.section_6 {
		opacity: 0.2;
		background-color: #394440;
		border-radius: 20rpx;
		height: 120rpx;
		border-left: solid 1rpx #ffffff;
		border-right: solid 1rpx #ffffff;
		border-top: solid 1rpx #ffffff;
		border-bottom: solid 1rpx #ffffff;
	}

	.pos_5 {
		position: absolute;
		left: 36rpx;
		bottom: 23rpx;
	}

	.pos_6 {
		position: absolute;
		left: 107rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.pos_7 {
		position: absolute;
		left: 36rpx;
		bottom: 23rpx;
	}

	.pos_8 {
		position: absolute;
		left: 107rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.pos_9 {
		position: absolute;
		left: 36rpx;
		bottom: 23rpx;
	}

	.pos_10 {
		position: absolute;
		left: 107rpx;
		top: 50%;
		transform: translateY(-50%);
	}



	.text_6 {
		margin-top: 10rpx;
	}
	.bottom {
		position: fixed;
		left: 0;
		bottom: 40rpx;
		width: 100%;
	}

	.text-wrapper_3 {
		padding: 34rpx 0;
		width: 690rpx;
		height: 99rpx;
		background-image: linear-gradient(90deg, #00ccbb 0%, #00e586 100%);
		border-radius: 50rpx;
	}


	.timbre-list-item {

		/* opacity: 0.2; */
		background-color: #232629;
		border-radius: 28rpx;
		/* height: 120rpx; */
		/* border-left: solid 1rpx #ffffff;
		border-right: solid 1rpx #ffffff;
		border-top: solid 1rpx #ffffff;
		border-bottom: solid 1rpx #ffffff; */
		border: 1rpx solid #4a4c4f;
		padding: 46rpx;

	}

	.border-green {
		border: 1rpx solid #08f9a7;
	}

	.add-mine-voice {
		padding: 52rpx 0 49rpx;
		border-radius: 24rpx;
		background-image: url('https://terminator.axu9.com/images/by-text-add-btn.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-top: 30rpx;
	}

	.add-icon {
		border-radius: 10rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.add-text {
		color: #ffffff;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		margin-left: 16rpx;
	}
	
	/* ai生成弹窗 */
	.ai-gif-class {
		width: 157rpx;
		height: 159rpx;
	}
</style>